<template>
  <div class="blink-star-wrap">
    <!--item.type eg: --yellow, --yellow-bling, --yellow-square,  --purpple, --orange,--cyan -->
    <div
      v-for="(item, index) in stars"
      :key="index"
      :style="starStyle(item)"
      :class="['blink-star', `blink-star${item.type}`]"
    ></div>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    stars: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    starStyle(item: any) {
      if (item.delay) {
        item['animation-delay'] = item.delay
        delete item.delay
      } else {
        item['animation-delay'] = `${(Math.random() * 6).toFixed(2)}S`
      }
      return {
        ...item
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes star {
  0% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
}
.blink-star-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  .blink-star {
    position: absolute;
    width: 0.28rem;
    height: 0.31rem;
    background-image: url("./images/blink-star/star-yellow-square.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: star 6s infinite;
    animation-delay: 2s;
    opacity: 0.2;
  }

  .blink-star--yellow {
    width: 0.26rem;
    height: 0.44rem;
    background-image: url("./images/blink-star/star-yellow.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 0;
  }

  .blink-star--yellow-bling {
    width: 0.28rem;
    height: 0.36rem;
    background-image: url("./images/blink-star/star-yellow-bling.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 1.5s;
  }

  .blink-star--yellow-square {
    width: 0.28rem;
    height: 0.31rem;
    background-image: url("./images/blink-star/star-yellow-square.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 2.5s;
  }

  .blink-star--purpple {
    width: 0.21rem;
    height: 0.36rem;
    background-image: url("./images/blink-star/star-purpple.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 3.5s;
  }

  .blink-star--orange {
    width: 0.18rem;
    height: 0.3rem;
    background-image: url("./images/blink-star/star-orange.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 4.5s;
  }

  .blink-star--cyan {
    width: 0.19rem;
    height: 0.21rem;
    background-image: url("./images/blink-star/star-cyan.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation-delay: 8.5s;
  }
}
</style>
